<template>
    <div class="box-column container-grid">
        <ux-header-search
            ref="searchHeader"
            v-bind="enquiryData"
            :isCheckPermissions="false"
            @search="onQueryClick"
        ></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid
                v-bind="tableConfig"
                :data="dataStore.data"
                :columns="table.columns"
            >
                <template v-slot:operate="{ row }">
                    <ux-btn-group
                        :btns="table.btns"
                        :data="{ row, permissionsData }"
                    ></ux-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page"
                :page-size="dataStore.proxy.pageSize"
                :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total"
                :layout="'total, sizes, prev, pager, next, jumper'"
            ></el-pagination>
        </div>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import { mixinTabPage } from "@/mixin/tab/Page";
import { mixinAccess } from "@/mixin/Access";
@Component({
    mixins: [mixinTableStore, mixinTableHeader, mixinTabPage, mixinAccess]
})
export default class equipmentDoorVistorTable extends Vue {
    @Action("equipmentDoor/vistor") getList: any;

    table: any = {
        // 列配置
        columns: [
            {
                width: 70,
                type: "seq",
                title: "序号"
            },
            {
                title: "邀约人姓名",
                field: "member_xm"
            },
            {
                title: "邀约人电话",
                field: "member_tel"
            },
            {
                title: "访客姓名",
                field: "vistor_xm"
            },
            {
                 width: 320,
                title: "开门有效时段",
                field: "duration"
            },
            {
                title: "可通行门禁",
                field: "group_name_str"
            },
            {
                title: "邀约时间",
                field: "created_at"
            }
        ]
    };

    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                field: "member_xm",
                label: "邀约人"
            },
            {
                field: "vistor_xm",
                label: "访客姓名"
            }
        ]
    };
}
</script>
<style scoped lang="scss">
.header-search-el {
    margin-top: 0;
}
</style>
